<%@ page import='com.google.appengine.api.memcache.*' %>
<%@ page import='com.google.appengine.api.channel.*' %>
<%@ page import='java.net.*' %>
<%@ include file="global.jsp"%>
<%
ChannelService channelService = ChannelServiceFactory.getChannelService();
String sessionId = session.getId();
String token = channelService.createChannel(sessionId);
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Touch</title>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>

<link type="text/css"
	href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<style>
div.ballClass {
	-moz-border-radius: 100px;
	border-radius: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	background-color: rgba(0, 25, 255, 0.5);
	width: 10em;
	height: 10em;
}
</style>
<script type="text/javascript">
	(function() {
		$(document).ready(function() {
			var host='http://remote-touch.appspot.com/';
			if (document.location.href.indexOf("8888") != -1){
				host='http://192.168.10.11:8888/' //Para pruebas en local con la ip del equipo de desarrollo
			}
			
			var url = host+"resources/remote/<%=sessionId%>";
			$('#qr').qrcode({ text: url,width:200,height:200 });
			channel = new goog.appengine.Channel('<%=token%>');
		    socket = channel.open();
		    socket.onopen = onOpened;
		    socket.onmessage = onMessage;
		    socket.onerror = onError;
		    socket.onclose = onClose;
		    
		});
		
		function onMessage(message){
			var pos = message.data.split(",");	
			$("#ball").offset( { top: pos[1]/100 *$(window).height() , left: pos[0]/100 *  $(window).width()});			
		}
		
		function onOpened(){
			//alert("OPEN");
		}
		
		function onClose(){
			alert("CLOSE");
		}
		function onError(error){
			alert("ERROR_"+error);
		}
		
	})()
</script>
</head>
<body>
	<center>
	<div id='qr' ></div>
	Read the QR code and control me
	<div class='ballClass' id="ball"></div>
</center>
</body>
</html>



